<%--
  Created by IntelliJ IDEA.
  User: 935684709
  Date: 2024/3/13
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入vue的js--%>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<%--引入element的js--%>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<%--引入elementui的样式--%>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="js/axios.min.js"></script>
<html>
<head>
</head>
<body>
<div id="app">
    <%--搜索开始--%>
    <el-form :inline="true" :model="empVo" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="empVo.ename" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="部门">
            <el-select v-model="empVo.deptno">
                <el-option v-for="d in depts" :label="d.dname" :value="d.deptno"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="qk" icon="el-icon-refresh">重置</el-button>
            <el-button type="success" @click="add">添加</el-button>
        </el-form-item>
    </el-form>
    <%--搜索结束--%>
    <%--添加开始--%>

    <div style="float: right;margin-right: 50px">
        <c:if test="${sessionScope.user!=null}">
            ${user.nickname}
            <el-button style="background-color: darkorange"><a href="/exit">退出</a></el-button>
        </c:if>
        <c:if test="${sessionScope.user==null}">
            <el-button style="background-color: darkorange"><a href="login.jsp">登录</a></el-button>
        </c:if>
    </div>
    <%--添加结束--%>
    <%--表格开始--%>
    <el-table
            :data="emps"
            border
            style="width: 100%">
        <el-table-column
                prop="empno"
                label="编号"
                width="80">
        </el-table-column>
        <el-table-column
                prop="ename"
                label="员工姓名">
        </el-table-column>
        <el-table-column
                prop="job"
                label="职位">
        </el-table-column>
        <el-table-column
                prop="mgr"
                label="上司编号">
        </el-table-column>
        <el-table-column
                prop="hiredate"
                label="入职日期">
        </el-table-column>
        <el-table-column
                prop="sal"
                label="工资">
        </el-table-column>
        <el-table-column
                prop="comm"
                label="提成">
        </el-table-column>
        <el-table-column
                prop="dept.dname"
                label="部门名称"
                width="180">
        </el-table-column>
        <el-table-column width="200" label="操作">
            <template slot-scope="scope">
                <el-button size="small" icon="el-icon-edit" @click="getEmp(scope.row.empno)" type="primary">编辑</el-button>
                <el-button size="small"  type="danger" icon="el-icon-delete" @click="delEmp(scope.row.empno)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--表格结束--%>
    <%--分页开始--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5,10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <%--分页结束--%>
    <%--添加开始--%>
    <el-dialog title="添加" :visible.sync="dialogFormVisible" center width="30%">
        <el-form :model="addEmp" label-width="70">
            <el-form-item label="姓名">
                <el-input v-model="addEmp.ename" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职位">
                <el-input v-model="addEmp.job" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上司编号">
                <el-input v-model="addEmp.mgr" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入职日期">
                <el-input type="date" v-model="addEmp.hiredate" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工资">
                <el-input v-model="addEmp.sal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="提成">
                <el-input v-model="addEmp.comm" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门名称">
                <el-select v-model="addEmp.deptno" placeholder="请选择部门" style="width: 100%">
                    <el-option v-for="d in depts" :label="d.dname" :value="d.deptno"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addemps">确 定</el-button>
        </div>
    </el-dialog>
    <%--添加结束--%>
    <%--编辑开始--%>
    <el-dialog title="修改" :visible.sync="updateFormVisible" center width="30%">
        <el-form :model="updateEmp" label-width="70">
            <el-form-item label="姓名">
                <el-input v-model="updateEmp.ename" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职位">
                <el-input v-model="updateEmp.job" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上司编号">
                <el-input v-model="updateEmp.mgr" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入职日期">
                <el-input type="date" v-model="updateEmp.hiredate" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工资">
                <el-input v-model="updateEmp.sal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="提成">
                <el-input v-model="updateEmp.comm" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门名称">
                <el-select v-model="updateEmp.deptno" placeholder="请选择部门" style="width: 100%">
                    <el-option v-for="d in depts" :label="d.dname" :value="d.deptno"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateemp">确 定</el-button>
        </div>
    </el-dialog>
    <%--编辑结束--%>

</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                /*全部员工*/
                emps: [],
                /*全部部门*/
                depts: {},
                /*搜索框数据*/
                empVo: {
                    ename: "",
                    deptno: "",
                },
                /*页面总条数*/
                total: 0,
                /*每页显示条数*/
                pagesize: 5,
                /*当前页码*/
                current: 1,
                /*控制添加页面显示和隐藏*/
                dialogFormVisible: false,
                /*控制编辑页面显示和隐藏*/
                updateFormVisible: false,
                /*添加传递的对象*/
                addEmp: {},
                /*修改传递的对象*/
                updateEmp: {}
            }
        },
        /*页面刷新默认执行方法*/
        created() {
            this.loadEmp();
            this.loadDept();
        }
        ,
        methods: {
            /*获取全部员工方法*/
            loadEmp() {
                axios.post("/emp/selectAllEmp/" + this.current + "/" + this.pagesize, this.empVo).then(reqult => {
                    console.log(reqult)
                    this.emps = reqult.data.list
                    this.total = reqult.data.total
                })
            },
            /*获取全部部门方法*/
            loadDept() {
                axios.post("/dept/selectAllDept").then(reqult => {
                    console.log(reqult)
                    this.depts = reqult.data
                })
            },
            /*搜索框搜索方法*/
            onSubmit() {
                this.loadEmp()
            },
            /*搜索框清空方法*/
            qk() {
                this.empVo = {}
                this.loadEmp()
            },
            /*分页页码改变触发事件*/
            handleCurrentChange(val) {
                this.current = val
                this.loadEmp()
            },
            /*分页页面显示个数改变触发事件*/
            handleSizeChange(val) {
                this.pagesize = val;
                this.loadEmp()
            },
            delEmp(id) {
                axios.post("/emp/deleteById/" + id).then(reqult => {
                    this.loadEmp()
                })
            },
            getEmp(id) {
                axios.post("/emp/selectById/" + id).then(reqlt => {
                    this.updateEmp = reqlt.data
                    console.log(this.updateEmp)
                    this.updateFormVisible = true
                })
            },
            add() {
                this.dialogFormVisible = true
            },
            addemps() {
                axios.post("/emp/insertEmp", this.addEmp).then(reqlt => {
                    this.dialogFormVisible = false
                    this.loadEmp()
                })
            },
            updateemp() {
                axios.post("/emp/updateById", this.updateEmp).then(reqlt => {
                    this.updateFormVisible = false
                    this.loadEmp()
                })
            },

        }
    })

</script>
<style>
    a {
        text-decoration: none;
    }
</style>
</html>
